import React from "react";
import {
  Chart,
  registerShape,
  Axis,
  Tooltip,
  Interval,
  Interaction,
  Coordinate,
  Annotation
} from "bizcharts";
import { countLearnTimeWithHour } from '@/utils/utils'
const sliceNumber = 0.01; // 自定义 other 的图形，增加两条线

registerShape("interval", "sliceShape", {
  draw(cfg, container) {
    const points = cfg.points || [];
    let path = [];
    path.push(["M", points[0].x, points[0].y]);
    path.push(["L", points[1].x, points[1].y - sliceNumber]);
    path.push(["L", points[2].x, points[2].y - sliceNumber]);
    path.push(["L", points[3].x, points[3].y]);
    path.push("Z");
    path = this.parsePath(path);
    return container.addShape("path", {
      attrs: {
        fill: cfg.color,
        path: path
      }
    });
  }
});


class PieChart extends React.Component<any, any> {
  render() {
    const { data } = this.props;
    data[0].value = countLearnTimeWithHour(data[0].value)
    data[1].value = countLearnTimeWithHour(data[1].value)
    data[2].value = countLearnTimeWithHour(data[2].value)
    return (
      <Chart data={data} height={280} autoFit  >
        <Coordinate type="theta" radius={0.8} innerRadius={0.75} />
        <Axis visible={false} />
        <Tooltip showTitle={false} />
        <Interval
          adjust="stack"
          position="value"
          color={[
            "type",
            [
              "#fa8c16",
              "#1890ff",
              "#52c41a",
            ],
          ]}
          shape="sliceShape"
        />
        <Annotation.Text
          position={['50%', '50%']}
          content="学习时长（学时）"
          style={{
            lineHeight: 240,
            fontSize: 18,
            fill: '#262626',
            textAlign: 'center',
          }}
        />
        <Interaction type="element-single-selected" />
      </Chart>

    );
  }
}

export default PieChart